import React, { useState, useEffect } from 'react'
import { Table, Button, Input, Modal, message ,Select} from 'antd';
import { getallstore, changestore } from '../../apis/store'
import qs, { stringify } from 'querystring'


export default function index() {
    const columns = [
        {
            title: '商铺名称',
            dataIndex: 'shopName',
        },
        {
            title: '信誉分',
            dataIndex: 'prestige',
        },
        {
            title: '商铺状态',
            dataIndex: 'status',
            filters: [
                {
                    text: '停用',
                    value: '停用',
                },
                {
                    text: '启用',
                    value: '启用',
                },
            ],
            onFilter: (value, index) => startsWith2(value, index),
        },
        {
            title: '电话',
            dataIndex: 'telephone',
        },
        {
            title: '商铺类型',
            dataIndex: 'type',
            filters: [
                {
                    text: '充电桩',
                    value: '充电桩',
                },
                {
                    text: '商铺',
                    value: '商铺',
                },
            ],
            onFilter: (value, index) => startsWith(value, index),
        },
        {
            title: '门店详情',
            dataIndex: 'details',
        },
        {
            title: '查看警告',
            dataIndex: 'Viewwarnings',
        },
        {
            title: '警告',
            dataIndex: 'warning',
        },
        {
            title: '下架',
            dataIndex: 'operation',
        },
    ];

    const columns2 = [
        {
            title: '创建时间',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '详细描述',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '状态',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '警告处理',
            dataIndex: 'address',
            key: 'address',
        },
    ];
    const [selectedRowKeys, setselectedRowKeys] = useState([])
    const [loading, setloading] = useState(false)
    const [chargedata, setchargedata] = useState([])
    const [pageall, setpageall] = useState({
        pageSize: 1000,
        pageNum: 1,
        shopName: null,
        status: null,
        sortField: null,
        sortOrder: null
    })

    const startsWith = (data, index) => {
        return index.type.props.children == data
    }
    const startsWith2 = (data, index) => {
        return index.status.props.children == data
    }
    const start = () => {
        console.log(1);
        setloading(true);
        setTimeout(() => {
            setselectedRowKeys([])
            setloading(false)
        }, 1000);
    };
    const onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setselectedRowKeys(selectedRowKeys)
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const allcharge = async () => {
        const page = qs.stringify(pageall)
        const src = await getallstore(page)
        console.log(src);
        setchargedata(src.data.rows)
    }
    const examineon = async (data) => {
        const charge = {
            id: data.id,
            status: 1
        }
        const chargeone = qs.stringify(charge)
        const res = await changestore(chargeone)
        allcharge()
    }
    const examineout = async (data) => {
        const charge = {
            id: data.id,
            status: 2
        }
        const chargeone = qs.stringify(charge)
        const res = await changestore(chargeone)
        allcharge()
    }
    const [chagrename, setchargename] = useState()
    const [statusdata, setstatusdata] = useState()
    const add = () => {
        console.log(chagrename, chargephone, chargeuser, chargeIDcard);
    }
    const clear = () => {
        setchargename()
        sethandleChange()
    }
    const handleChange = (value) => {
        setstatusdata(value)
    }
    // 搜索
    const modify = async () => {
        const charge = {
            shopName: chagrename,
            status: statusdata
        }
        console.log(charge);
        const chargeone = qs.stringify(charge)
        const res = await getallstore(chargeone)
        setchargedata(res.data.rows)
    }
    useEffect(() => {
        allcharge()
    }, [])
    const data = [];
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [shopdata, setshopdata] = useState({});
    const showModal = (data) => {
        setshopdata(data)
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const [isModalVisible2, setIsModalVisible2] = useState(false);
    const [shopdatachilddata, setIshopdatachilddata] = useState([]);
    const showModal2 = (data) => {
        setIshopdatachilddata(data)
        setIsModalVisible2(true);
    };

    const handleOk2 = () => {
        setIsModalVisible2(false);
    };

    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };

    const putworring = (data) => {
        if (data > 90) {
            message.error('该店铺信誉值未低于90，无法警告')
        }
    }
    for (let i = 0; i < chargedata.length; i++) {
        data.push({
            key: i,
            ...chargedata[i],
            status: chargedata[i].status == 1 ? <span style={{ border: "1px solid #87E8DE", backgroundColor: "#E6FDFB", color: "#87E8DE", padding: "5px" }}>启用</span> : <span style={{ border: "1px solid #F4838A", backgroundColor: "#FCF1F1", color: "#F4838A", padding: "5px" }}>停用</span>,
            type: chargedata[i].type ? <span style={{ border: "1px solid #87E8DE", backgroundColor: "#E6FDFB", color: "#87E8DE", padding: "5px" }}>商铺</span> : <span style={{ border: "1px solid #BEECA0", backgroundColor: "#F3FDEF", color: "#BEECA0", padding: "5px" }}>充电桩</span>,
            details:
                <>
                    <Button type="primary" onClick={() => showModal(chargedata[i])}>
                        查看详情
                    </Button>
                </>
            ,
            Viewwarnings:
                <>
                    <Button type="primary" onClick={() => showModal2(chargedata[i].serviceinfoList)}>
                        警告详情
                    </Button>
                </>
            ,
            warning:
                <Button onClick={() => putworring(chargedata[i].prestige)}>警告</Button>
            ,
            operation:
                chargedata[i].status == 1 ? <Button onClick={() => examineon(chargedata[i])} >停用</Button> : <Button onClick={() => examineout(chargedata[i])}>启用</Button>
        });
    }

    return (

        <div>
            <div>
                <table style={{ margin: '0 auto' }}>
                    <tbody>
                        <tr>
                            <td>
                                商铺名称：
                            </td>
                            <td>
                                <Input value={chagrename} onChange={(event) => setchargename(event.target.value)}></Input>
                            </td>
                            <td>
                                商铺状态：
                            </td>
                            <td>
                                <Select defaultValue="" style={{ width: 120 }} onChange={handleChange}>
                                    <Option value="">展示所有</Option>
                                    <Option value="1">启用</Option>
                                    <Option value="2">停用</Option>
                                </Select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style={{ marginBottom: 5, display: "flex", justifyContent: "space-between" }}>
                <div>
                    <Button style={{ marginRight: "5px" }} onClick={() => add()}>
                        新增
                    </Button>
                    <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
                        删除
                    </Button>
                    <span style={{ marginLeft: 8 }}>
                        {hasSelected ? `选中 ${selectedRowKeys.length} 条` : ''}
                    </span>
                </div>
                <div>
                    <Button style={{ marginRight: "5px" }} onClick={() => modify()}>
                        搜索
                    </Button>
                    <Button onClick={() => clear()}>
                        重置
                    </Button>
                </div>
            </div>
            <Table rowSelection={rowSelection} columns={columns} dataSource={data}
                pagination={
                    {
                        defaultCurrent: 1,
                        defaultPageSize: 10,
                        pageSizeOptions: [5, 10, 15, 20],
                        showSizeChanger: true,
                        showQuickJumper: true
                    }}
            />
            <Modal title="门店详情" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>店铺名称：{shopdata.shopName}</p>
                <p>店铺账户：{shopdata.account}</p>
                <p>店铺地址：{shopdata.address}</p>
                <p>手机号码：{shopdata.telephone}</p>
                <p>营业执照：{shopdata.licence}</p>
                <p>店铺金额：{shopdata.money}</p>
                <p>店长姓名：{shopdata.managerName}</p>
                <p>身份证号：{shopdata.idcard}</p>
                <p>营业时间：{shopdata.startTime}~{shopdata.endTime}</p>
            </Modal>
            <Modal title="警告详情" visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2}>
                <Table dataSource={shopdatachilddata} columns={columns2} />;
            </Modal>
        </div>
    )
}
